<template>
  <div v-loading="loading">
    <div class="area-header">
      <span class="area-header-title">{{ actTitle }}</span>
    </div>
    <el-form ref="form" :model="form" :rules="rules" style="position: unset;">
      <el-row>
        <el-table :data="form.dealDistributionPaymentList" class="nowrapTable formTable" border>
          <el-table-column :label="$t('序号')" align="center" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('主体名称')" align="center" min-width="222">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('主体名称') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'dealDistributionPaymentList.' + scope.$index + '.investorId'" :rules="[{ required: true, message: $t('必填信息'), trigger: ['blur', 'change'] }]">
                <el-select v-model="scope.row.investorId" filterable clearable :placeholder="$t('主体名称')" @change="sumMoneySubDetail(scope.row)">
                  <el-option
                    v-for="dict in dealDistributionDetailsSubOption"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.id"
                  />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="amountDistribution" min-width="170">
            <template slot="header" slot-scope="{}">
              <span>{{ $t('回款时间') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'dealDistributionPaymentList.' + scope.$index + '.collectionTime'" :rules="[{ required: false, message: $t('必填信息'), trigger: ['blur', 'change'] }]">
                <el-date-picker
                  v-model="scope.row.collectionTime"
                  type="date"
                  style="width: 150px"
                  :placeholder="$t('回款时间')"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('本金') + $t('金额单位')" align="center" prop="amountPrincipal" min-width="130">
            <template slot="header" slot-scope="{}">
              <span>{{ $t('本金') }}{{ $t('金额单位') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'dealDistributionPaymentList.' + scope.$index + '.amountPrincipal'">
                <money v-model="scope.row.amountPrincipal" unit="w" @change="sumMoneySubDetail(scope.row)" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('收益') + $t('金额单位')" align="center" prop="amountIncome" min-width="130">
            <template slot="header" slot-scope="{}">
              <span>{{ $t('收益') }}{{ $t('金额单位') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'dealDistributionPaymentList.' + scope.$index + '.amountIncome'">
                <money v-model="scope.row.amountIncome" unit="w" @change="sumMoneySubDetail(scope.row)" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('分红') + $t('金额单位')" align="center" prop="amountBonus" min-width="130">
            <template slot-scope="scope">
              <el-form-item :prop="'dealDistributionPaymentList.' + scope.$index + '.amountBonus'">
                <money v-model="scope.row.amountBonus" unit="w" @change="sumMoneySubDetail(scope.row)" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('其它') + $t('金额单位')" align="center" prop="amountOthers" min-width="130">
            <template slot-scope="scope">
              <el-form-item :prop="'dealDistributionPaymentList.' + scope.$index + '.amountOthers'">
                <money v-model="scope.row.amountOthers" unit="w" @change="sumMoneySubDetail(scope.row)" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('回款总额') + $t('金额单位')" align="center" min-width="130">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('回款总额') }}{{ $t('金额单位') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'dealDistributionPaymentList.' + scope.$index + '.amountDistribution'" :rules="[{ required: true, message: $t('必填信息'), trigger: ['blur', 'change'] }]">
                <money v-model="scope.row.amountDistribution" disabled unit="w" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('备注')" align="center" prop="payeeName" min-width="130">
            <template slot="header" slot-scope="{}">
              <span>{{ $t('备注') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'dealDistributionPaymentList.' + scope.$index + '.payeeName'">
                <el-input v-model="scope.row.payeeName" maxlength="100" :placeholder="$t('备注')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('操作')" fixed="right" align="center" min-width="80">
            <template slot-scope="scope">
              <el-button v-hasPermi="['deal:distribution:remove']" type="text" class="el-icon-delete" @click="delHandleDetail(scope.$index, scope.row)" />
            </template>
          </el-table-column>
        </el-table>
        <div class="tol" style="display: -webkit-box;">
          <el-button v-if="!otherBtnHide" type="primary" icon="el-icon-plus" size="mini" @click="addHandleDetails">{{ $t("添加") }}</el-button>
        </div>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closePage">{{ $t('取消') }}</el-button>
      <el-button type="primary" @click="submitForm(true)">{{ $t('保存') }}</el-button>
    </div>
    <OnlinePreview ref="OnlinePreview" />
  </div>
</template>
<script>
import { getDealDistribution, deleteByIdToPayment, updateTimeMoney } from '@/api/deal/distribution/dealDistribution'

export default {
  components: {
  },
  props: {
    actTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      otherBtnHide: false,
      form: {
        id: undefined,
        dealDistributionDetailsList: [],
        dealDistributionPaymentList: []
      },
      dealDistributionDetailsSubOption: [],
      loading: false,
      rules: {}
    }
  },
  created() {
  },
  methods: {
    init(data) {
      this.loading = true
      getDealDistribution(data.id).then(response => {
        this.form = response.data
        // 获取下拉中都应该有啥
        this.dealDistributionDetailsSubOption = []
        var tempInvestorId = []
        this.form.dealDistributionDetailsList && this.form.dealDistributionDetailsList.forEach(item => {
          if (!tempInvestorId.includes(item.investorId)) {
            this.dealDistributionDetailsSubOption.push({ id: item.investorId, name: item.investorName })
            tempInvestorId.push(item.investorId)
          }
        })
        this.loading = false
      })
    },
    addHandleDetails() {
      const row = {
        id: undefined,
        investorId: undefined,
        amountPrincipal: undefined,
        amountIncome: undefined,
        amountBonus: undefined,
        amountOthers: undefined,
        amountDistribution: undefined
      }
      if (!(this.form.dealDistributionPaymentList instanceof Array)) {
        this.$set(this.form, 'dealDistributionPaymentList', [])
      }
      this.$nextTick(() => {
        this.form.dealDistributionPaymentList.push(row)
      })
    },
    delHandleDetail(index, row) {
      const _this = this
      const id = row.id
      if (id !== undefined && id !== '' && id != null) {
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          type: 'warning'
        })
          .then(function() {
            return deleteByIdToPayment(id)
          }).then(() => {
          _this.form.dealDistributionPaymentList.splice(index, 1)
          return _this.msgSuccess(this.$t('删除成功'))
        })
          .catch(function() {})
      } else {
        _this.form.dealDistributionPaymentList.splice(index, 1)
      }
    },
    sumMoneySubDetail(row) {
      var tempInvestorId = row.investorId
      this.form.dealDistributionPaymentList && this.form.dealDistributionPaymentList.forEach(item => {
        if (item.investorId === tempInvestorId) {
          item.amountDistribution = this.formatNumber(item.amountPrincipal) + this.formatNumber(item.amountIncome) + this.formatNumber(item.amountBonus) + this.formatNumber(item.amountOthers)
          if (item.amountDistribution === 0) {
            item.amountDistribution = undefined
          }
        }
      })
    },
    formatNumber(val) {
      if (val === undefined || val === null || val === '' || isNaN(parseFloat(val))) {
        return 0
      }
      return parseFloat(val)
    },
    closePage() {
      this.$parent.$parent.formPaymentOpen = false
    },
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          updateTimeMoney(this.form).then(response => {
            this.loading = false
            if (response.code === 200) {
              this.closePage()
            } else {
              this.msgError(this.$t(response.msg))
            }
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.locationError(document)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 0px;
}
</style>
